var layers = document.querySelector('.ui_layer'),
  btns = layers.querySelectorAll('.layer_head_item'),
  main = layers.querySelector('.ui_layer_main'),
  mask = layers.querySelector('.ui_layer_mask'),
  icon = layers.querySelector('.icon_tips_01'),
  list = layers.querySelectorAll('.ui_layer_box_list'),
  time;
mask.addEventListener('click', function() {
  closeFn()
//  main.addEventListener("webkitTransitionEnd", function() {
//    layers.style.display = 'none';
//  }, false);
//  main.addEventListener("transitionend", function() {
//    layers.style.display = 'none';
//    document.body.style.overflow="";
//  }, false);
}, false);

function closeFn(){
	mask.style.cssText = 'display:none;opacity:0;';
	  main.style.WebkitTransform = 'translateY(100%)';
	  main.style.transform = 'translateY(100%)';
	  layers.style.display = 'none';
}

//init();


function init() {
  layers.style.display = 'block';
  clearTimeout(time);
  time = setTimeout(function() {
    mask.style.cssText = 'display:block;opacity:.5;';
    main.style.WebkitTransform = 'translateY(0)';
    main.style.transform = 'translateY(0)';
  }, 100);
};

[].forEach.call(btns, function(ele, index, arr) {
  ele.addEventListener('click', function() {
    [].forEach.call(btns, function(ele, index, arr) {
      ele.classList.remove('active');
      list[index].classList.remove('active');
    });
    this.classList.add('active');
    list[index].classList.add('active');
    if (index === 0) {
      icon.style.left = '25%';
    } else {
      icon.style.left = '75%';
    }
  }, false);

});
